<template>
  <div class="article" v-if="articles">
    <article-item v-for = "item in articles" :key = "item.id" :articleItem = "item"  />
  </div>
</template>

<script>
  import ArticleItem from './ArticleItem.vue'
  export default {
    name: 'Article',
    components: {
      ArticleItem
    },
    props: ['articles']
  }
</script>

<style scoped>
  .article {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;  /* 让子项保持自身高度 */
    margin: 20px 0;
    column-count: 4;
    column-gap: 0;
  }
</style>